<template>
  <el-dialog title="组合控件"
             :visible.sync="visible"
             :append-to-body="true"
             width="500px"
             @close="dialogClose">
    <div class="reportform-dialog">
      <el-row>
        <el-col v-for="item in controlList"
                :key="item.content_id"
                :span="24">
          <div class="detail-container">
            <span>{{item.content_name}}</span>
            <div class="detail"
                 v-if="item.control_type==='7' || (item.control_type==='22' && item.control_cfg.up_type==='2')">
              <el-image v-for="(image,idx) in item.real_value"
                        :key="idx"
                        :zIndex="9999"
                        fit="cover"
                        style="width: 120px;height: 120px;margin-right: 10px;"
                        :preview-src-list="item.real_value"
                        :src="image">
              </el-image>
            </div>
            <!-- 单行文本、多行文本、数字框、 位置选择器-->
            <div class="detail"
                 v-if="item.control_type==='16' || item.control_type==='17' 
               || item.control_type==='18' || item.control_type==='27'">
              <p v-if="item.real_value">{{item.real_value[0]}}</p>
            </div>
            <!-- 时间选择 -->
            <div class="detail"
                 v-if="item.control_type==='19'">
              <p class="time">
                <span v-if="item.real_value[0]">{{ item.real_value[0]}}</span>
                <span v-if="item.real_value[1]">{{ '- ' +item.real_value[1]}}</span>
              </p>
            </div>
            <!-- 标签选择、选择控件 -->
            <div class="detail"
                 v-if="item.control_type==='20' || item.control_type==='21'">
              <p v-for="detail in item.real_value"
                 :key="detail.value">{{detail.value}}</p>
            </div>
            <!-- 上传控件-视频 -->
            <div class="detail"
                 v-if="item.control_type==='22' && item.control_cfg.up_type==='4'">
              <video v-for="(video) in item.real_value"
                     :key="video.url"
                     width="200"
                     :height="item.control_cfg.up_type==='4'?'200':'50'"
                     controls>
                <source :src="video.url"
                        type="video/mp4">
                <source :src="video.url">
              </video>
            </div>
            <!-- 上传控件-文件 -->
            <div class="detail"
                 v-if="item.control_type==='22' && item.control_cfg.up_type==='1'">
              <span v-for="file in item.real_value"
                    @click="downloadFile(file)"
                    :key="file.url"
                    class="file">{{file.name}}</span>
            </div>
            <!-- 人员选择控件 -->
            <div class="detail"
                 v-if="item.control_type==='28'">
              <p class="time user">
                <span v-for="user in item.real_value"
                      :key="user.user_id">{{user.user_name}}</span>
              </p>
            </div>
            <!-- 计分控件 -->
            <div class="detail"
                 v-if="item.control_type==='25'">
              <p v-if="item.real_value">{{item.real_value[0].real_value}}</p>
            </div>
            <!-- 注释控件 -->
            <div class="detail"
                 v-if="item.control_type==='24'">
              <p>{{item.control_cfg.content}}</p>
            </div>
          </div>

        </el-col>
      </el-row>
    </div>
    <div slot="footer">

      <el-button type="primary"
                 @click="dialogClose">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      controlList: []
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },

    dialogForm: {
      type: Array
    },

  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
    },
    dialogForm: {
      handler (newval, oldval) {
        this.controlList = JSON.parse(JSON.stringify(newval))

      },
      deep: true
    }
  },
  methods: {
    dialogClose () {
      this.$emit("update:dialogVisible", false);
    },
  },
  created () {
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.reportform-dialog {
  .el-col {
    margin-bottom: 20px;
  }
  .detail-container {
    display: flex;
    align-items: center;
    span {
      color: #666;
      margin-right: 20px;
    }
    .file {
      color: #1890ff;
      cursor: pointer;
    }
    img {
      width: 200px;
      height: 200px;
    }
    video {
      margin-right: 20px;
    }
    .time {
      span {
        color: #000;
        font-weight: bold;
        margin-right: 0;
      }
    }
    .user {
      span {
        margin-right: 10px;
      }
    }
    .detail {
      color: #000;
      font-weight: bold;
      line-height: 20px;
    }
  }
}
</style>